<template>
  <view class="login">
    <view class="header">
      <image src="http://120.46.150.252:10004/static/icon-images/系统.png" mode=""></image>
      <view class="title">
        登录
      </view>
    </view>
    <view class="collectForm">
      <u--input placeholder="请输入账号" border="surround" v-model="username"
        :customStyle="{margin:'20rpx 0',height:'80rpx'}"></u--input>
      <u--input placeholder="请输入密码" border="surround" v-model="password"
        :customStyle="{margin:'20rpx 0',height:'80rpx'}" type="password"></u--input>
    </view>
    <view class="btn">
      <button type="primary" @click="login" class="login_btn">立即登录</button>
      <button type="primary" @click="toRegister" class="register_btn">没有账号？去注册</button>
    </view>
  </view>
</template>

<script>
  import httpUtils from '../../utils/httpUtils.js'
  import {login,toRegister} from '@/utils/loginAndRegister.js'
  export default {
    name: "login",
    props: ['Register'],
    data() {
      return {
        username: '',
        password: '',
        isLogin: true
      };
    },
    methods: {
      login() {
        httpUtils.request({
          url: '/user/login',
          method: 'POST',
          data: {
            username: this.username,
            password: this.password
          }
        }).then(val => {
          uni.setStorage({
            key: 'token',
            data: val.token,
            success() {
              uni.showToast({
                title: '登录成功',
                duration: 1000,
                icon: 'success',
                complete() {
                  uni.switchTab({
                    url: '/pages/my/my'
                  })
                }
              })
      
            }
          })
        }, err => {
          console.log(err);
          if (err.status === 501) {
            uni.showToast({
              title: err.message,
              duration: 1000,
              icon: 'error'
            })
          }
        })
      },
      toRegister() {
        this.Register(1111)
      },
    }
  }
</script>

<style lang="less">
.login {
    padding: 0 20rpx;

    .header {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 300rpx;
        height: 250rpx;
      }

      .title {
        color: #55aaff;
        font-size: 48rpx;
      }
    }

    .btn {
      display: flex;

      .login_btn {
        flex: 1;
        color: #fff;
        background-color: #55aaff;
        border-radius: 30rpx;
      }

      .register_btn {
        flex: 1;
        color: #424242;
        background-color: #f1f1f1;
        border-radius: 30rpx;
      }
    }

  }
</style>
